<template>
  <!-- 三个部分 表单部分 列表部分 遮罩部分（可用组件库）  （可以写成三个子组件）-->
  <div class="couslt">
    <van-nav-bar
      title="在线客服"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <ul class="xiaotu">
      <li>
        <div>
          <img
            src="https://i.52112.com/icon/jpg/256/20190422/37229/1776116.jpg"
            alt=""
          />
          您好，请问有什么可以帮您的呢?
        </div>
      </li>
    </ul>
    <ul class="tado">
      <li v-for="(item, index) in state.list" :key="index" class="right">
        <div>
          <span class="userinfo">{{ item }}</span>
          <span class="useravatar">
            <van-icon
              name="http://pic.616pic.com/ys_b_img/00/13/94/xXh4SIGFme.jpg"
            />&nbsp;
            <span @click="removeItem(index)" class="btn1">x</span>
          </span>
        </div>
      </li>
    </ul>
    <!-- todolist -->
    <div class="todolist">
      <input type="text" v-model="textValue" class="inputt" />
      <button @click="handleClick" class="btn">发送消息</button>
    </div>
    <ul v-if="falg" class="neirong">
      <li>
        <img
          src="https://i.52112.com/icon/jpg/256/20190422/37229/1776116.jpg"
          alt=""
        />
        费用问题:点击查看优惠卷
      </li>
      <li>
        <img
          src="https://i.52112.com/icon/jpg/256/20190422/37229/1776116.jpg"
          alt=""
        />
        费用问题:点击查看优惠卷
      </li>
      <li>
        <img
          src="https://i.52112.com/icon/jpg/256/20190422/37229/1776116.jpg"
          alt=""
        />
        地铁:
      </li>
      <li>
        <img
          src="https://i.52112.com/icon/jpg/256/20190422/37229/1776116.jpg"
          alt=""
        />
        车:
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    const { state, removeItem } = remove();
    const { textValue, handleClick, falg } = add(state);

    const onClickLeft = () => {
      history.go(-1);
    };

    /* 监听用户是否输入 让一个ul的内容·是否显示*/
    return {
      textValue,
      state,
      handleClick,
      removeItem,
      /* 监听state.list */
      falg,
      onClickLeft,
    };
  },
};

const add = (state) => {
  // 新增
  const textValue = ref("");
  // 新增
  const handleClick = () => {
    state.list.push(textValue.value);
    textValue.value = "";
  };
  let falg = ref(false);
  watch(state.list, () => {
    console.log(falg.value);
    falg.value = true;
  });
  /* 查看有没有数据如果有就发送数据 */
  return {
    textValue,
    falg,
    handleClick,
  };
};

const remove = () => {
  // 删除
  const state = reactive({
    list: [],
  });
  // 删除
  const removeItem = (i) => {
    state.list = state.list.filter((item, index) => index !== i);
  };

  return {
    state,
    removeItem,
  };
};
</script>
<style lang="less">
.couslt {
  width: 100%;
  height: 667px;
  font-size: 18px;
  background-color: blanchedalmond;
  // margin: 30px auto;

  .van-nav-bar .van-icon,
  .van-nav-bar__text {
    color: #323233;
  }
  .xiaotu li {
    font-size: 28/2px;
    img {
      width: 40px;
      height: 40px;
      margin: 10px;
      vertical-align: middle;
    }
    div {
      vertical-align: middle;
      color: rgb(104, 115, 115);
    }
  }
  .todolist {
    position: fixed;
    height: 60px;
    width: 100%;
    bottom: 0;
    left: 0;
    // margin: 0 0 20px 20px;
    .inputt {
      width: 75%;
      height: 35px;
      border-radius: 5px;
      padding-left: 10px;
      border: #666 solid 1px;
      opacity: 0.5;
      margin: 0 0 10px 10px;
    }
    .btn {
      height: 35px;
      background-color: rgb(231, 236, 200);
      border-radius: 4px;
      border: 1px solid rgb(236, 228, 151);
      margin: 0 0 10px 10px;
      padding: 5px;
      font-weight: 500;
    }
  }
  .right {
    width: 100%;
    text-align: right;
  }

  .tado {
    li {
      position: relative;
      white-space: wrap;
      div {
        span:nth-child(1) {
          border-radius: 8px;
          padding: 5px;
          margin: 4px 0;
          background-color: #fff;
          display: inline-block;
          margin-right: 70px;
          color: #687373;
        }
        span:nth-child(2) {
          position: absolute;
          right: 15px;
          top: 0;
          .van-icon__image {
            width: 35px;
            height: 35px;
          }
          .btn1 {
            position: absolute;
            right: 1px;
            color: sandybrown;
            font-size: 10px;
          }
        }
      }
    }
  }
  .neirong li {
    margin: 10px 10px;
    height: 1rem;
    line-height: 1rem;
    vertical-align: middle;
    color: #687373;
    font-size: 14px;
    img {
      width: 1rem;
      height: 1rem;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
</style>
